<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="js/layui/css/layui.css" media="all">
		<title>智慧巴士列表</title>

		<style>
			.layui-container {
				margin-top: 10px;
				height: 40px;
				line-height: 40px;
			}

			.null {
				color: #fff;
			}

			.title {
				text-align: center;
				background-color: #009F95;
			}

			.bus-div {
				background-color: #009F95;
				margin-top: 5px;
			}

			.bus-div ul {
				padding-left: 30px;
			}

			.bus-div li {
				height: 30px;
				line-height: 30px;
				color: #D3D4D3
			}

			.layui-collapse {
				border: none;
			}

			.layui-colla-title {
				background-color: #009688;
			}

			.layui-colla-content {
				border: none;
				color: #000000;
				background-color: #EEEEEE;
			}
		</style>
	</head>
	<body>
		<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-xs1 null">
					1
				</div>
				<div class="layui-col-xs10 title">
					巴士列表
				</div>
				<div class="layui-col-xs1 null">
					1
				</div>
			</div>
		<!-- 	<div class="layui-row">
				<div class="layui-col-xs1 null">
					<span class="bus-id">1</span>
				</div>
				<div class="layui-col-xs10 bus-div">
					<ul>
						<li>线路名称:厚溥定制班车</li>
						<li>起终点:郑州东站-中兴产业园</li>
						<li>运行时间:7:00-18:00</li>
						<li>票价:￥15</li>
						<li>里程:10公里</li>
					</ul>
					<div class="layui-collapse">
						<div class="layui-colla-item">
							<h2 class="layui-colla-title">站点</h2>
							<div class="layui-colla-content">
								站点1-站点2站点1-站点2<br />
								站点1-站点2<br />
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs1 null">
					1
				</div>
			</div> -->
		
		</div>


		<script src="js/jquery.min.js"></script>
		<script src="js/layui/layui.js"></script>
		<script src="js/layer/layer.js"></script>
		<script src="js/common.js"></script>
		<script src="js/jquery.cookie.js"></script>
		
		<script type="text/javascript">
			$(function(){
				
				$.ajax({
					url: baseUrl+"bus/list.json",
					contentType: "json",
					success: function(data) {
						if (data.code == "200") {
							var busList = data.pageInfo.list;
							busList.forEach(function(bus) {
								var layuiRowStr = '<div class="layui-row">'+
									'<div class="layui-col-xs1 null">'+
										'<span class="bus-id">'+bus.id+'</span>'+
									'</div>'+
									'<div class="layui-col-xs10 bus-div">'+
										'<ul>'+
											'<li>线路名称:'+bus.name+'</li>'+
											'<li style="height: 90px;">起终点:<br/>&nbsp;&nbsp;'+bus.startPoint+'<br/>&nbsp;&nbsp;'+bus.endPoint+'</li>'+
											'<li>运行时间:'+bus.time+'</li>'+
											'<li>票价:￥'+bus.price+'</li>'+
											'<li>里程:'+bus.distance+'公里</li>'+
										'</ul>'+
										'<div class="layui-collapse">'+
											'<div class="layui-colla-item">'+
												'<h2 class="layui-colla-title">站点</h2>'+
												'<div class="layui-colla-content">'+
													'站点1-站点2站点1-站点2<br />'+
													'站点1-站点2<br />'+
												'</div>'+
											'</div>'+
										'</div>'+
									'</div>'+
									'<div class="layui-col-xs1 null">'+
										'1'+
									'</div>'+
								'</div>';
								$(".layui-container").append(layuiRowStr);
								
							});
							bindUlClick();
						}
					}
				});
				
				
				
				
			});
			
			function bindUlClick(){
				$(".bus-div ul").click(function(){
					var bus_id =$(this).parent().parent().children(".layui-col-xs1").children(".bus-id")[0].innerText;
					window.location.href="bus-info.html?id="+bus_id;
				});
			}
		</script>
	</body>
</html>
